<!doctype html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style type="text/css">
    body,
    html {
      margin: 0;
      padding: 0;
    }

    body,
    html,
    .bg {
      height: 100%;
    }

    body,
    h1,
    h2,
    h3,
    h4,
    p,
    em,
    strong {
      font-family: sans-serif;
    }

    body {
      font-size: 15px;
      color: #333333;
    }

    a {
      color: #333333;
      outline: 0;
      text-decoration: underline;
    }

    a img {
      border: 0;
      outline: 0;
    }

    img {
      max-width: 100%;
      height: auto;
      vertical-align: top;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      font-weight: 900;
      line-height: 1.25;
    }

    h1 {
      font-size: 40px;
      color: #333333;
      margin: 0 0 25px 0;
    }

    h2 {
      color: #333333;
      margin: 0 0 25px 0;
      font-size: 30px;
      line-height: 30px;
    }

    h3 {
      font-size: 25px;
      color: #333333;
      margin: 0 0 25px 0;
    }

    h4 {
      font-size: 20px;
      color: #333333;
      margin: 0 0 15px 0;
      line-height: 30px;
    }

    h5 {
      color: #333333;
      font-size: 17px;
      font-weight: 900;
      margin: 0 0 15px;
    }

    table {
      border-collapse: collapse;
    }

    p,
    td {
      font-size: 14px;
      line-height: 25px;
      color: #333333;
    }

    p {
      margin: 0 0 25px;
    }

    ul {
      padding-left: 15px;
      margin-left: 15px;
      font-size: 14px;
      line-height: 25px;
      margin-bottom: 25px;
    }

    li {
      font-size: 14px;
      line-height: 25px;
      color: #333333;
    }

    table.hr td {
      font-size: 0;
      line-height: 2px;
    }

    .white {
      color: white;
    }

    /********************************
    MAIN
    ********************************/

    .main {
      background: white;
    }

    /********************************
    MAX WIDTHS
    ********************************/

    .max-width {
      max-width: 800px;
      width: 94%;
      margin: 0 3%;
    }

    /********************************
    REUSABLES
    ********************************/

    .padding {
      padding: 60px;
    }

    .center {
      text-align: center;
    }

    .no-border {
      border: 0;
      outline: none;
      text-decoration: none;
    }

    .no-margin {
      margin: 0;
    }

    .spacer {
      line-height: 45px;
      height: 45px;
    }

    /********************************
    PANELS
    ********************************/

    .panel {
      width: 100%;
    }

    @media screen and (max-width: 800px) {
      h1 {
        font-size: 24px !important;
        margin: 0 0 20px 0 !important;
      }

      h2 {
        font-size: 20px !important;
        margin: 0 0 20px 0 !important;
      }

      h3 {
        font-size: 20px !important;
        margin: 0 0 20px 0 !important;
      }

      h4 {
        font-size: 18px !important;
        margin: 0 0 15px 0 !important;
      }

      h5 {
        font-size: 15px !important;
        margin: 0 0 10px !important;
      }

      .max-width {
        width: 90% !important;
        margin: 0 5% !important;
      }

      td.padding {
        padding: 30px !important;
      }

      td.padding-vert {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
      }

      td.padding-horiz {
        padding-left: 20px !important;
        padding-right: 20px !important;
      }

      .spacer {
        line-height: 20px !important;
        height: 20px !important;
      }
    }

  </style>
</head>

<body>
  <div style="background-color: #f3f3f3; height: 100%">
    <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f3f3f3">
      <tr>
        <td valign="top" align="left">
          <table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tbody>
              <tr>
                <td align="center" valign="top">
                  <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tbody>
                      <tr>
                        <td align="center">
                          <table class="max-width" cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tbody>
                              <tr>
                                <td class="spacer">&nbsp;</td>
                              </tr>
                              <tr>
                                <td class="padding main">
                                  <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                    <tbody>
                                      <tr>
                                        <td>
                                          <!-- LOGO -->
                                          <a href="https://payloadcms.com/" target="_blank">
                                            <img src="https://payloadcms.com/images/logo-dark.png" width="150"
                                              height="auto" />
                                          </a>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td class="spacer">&nbsp;</td>
                                      </tr>
                                      <tr>
                                        <td>
                                          <!-- HEADLINE -->
                                          <h1 style="margin: 0 0 30px"><%= headline %></h1>
                                        </td>
                                      </tr>
                                      <tr>
                                        <td>
                                          <!-- CONTENT -->
                                          <%- content %>

                                          <!-- CTA -->
                                          <% if (cta) { %>
                                          <div>
                                            <a href="<%= cta.url %>" style="
                                                  background-color: #222222;
                                                  border-radius: 4px;
                                                  color: #ffffff;
                                                  display: inline-block;
                                                  font-family: sans-serif;
                                                  font-size: 13px;
                                                  font-weight: bold;
                                                  line-height: 60px;
                                                  text-align: center;
                                                  text-decoration: none;
                                                  width: 200px;
                                                  -webkit-text-size-adjust: none;
                                                ">
                                              <%= cta.buttonLabel %>
                                            </a>
                                          </div>
                                          <% } %>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>
